<template>
  <div class="web-page-content">
    <web-page-box v-for="(module, i) in modules" :key="module.name" :index="i" :class="`${module.name}-page-box`"
      :id="`module-${module.name}`" :pageJson="module.json" />
  </div>
</template>

<script lang="ts" setup>
import chinesejournal from '@/assets/webJson/chinesejournal.json'
import database from '@/assets/webJson/database.json'
import degree from '@/assets/webJson/degree.json'
import drug from '@/assets/webJson/drug.json'
import internaljournal from '@/assets/webJson/internaljournal.json'
import knowledgebase from '@/assets/webJson/knowledgebase.json'
// import learn from "@/assets/webJson/learn.json";
import moyu from '@/assets/webJson/moyu.json'
import OAdatabase from '@/assets/webJson/OAdatabase.json'
import plugin from '@/assets/webJson/plugin.json'
import publisher from '@/assets/webJson/publisher.json'
import search from '@/assets/webJson/search.json'
import tool from '@/assets/webJson/tool.json'
import use from '@/assets/webJson/use.json'
import WebPageBox from '@/components/web/WebPageBox.vue'

const modules = [
  { name: 'use', json: use },
  { name: 'search', json: search },
  { name: 'plugin', json: plugin },
  { name: 'database', json: database },
  { name: 'knowledgebase', json: knowledgebase },
  { name: 'OAdatabase', json: OAdatabase },
  { name: 'degree', json: degree },
  { name: 'drug', json: drug },
  { name: 'chinesejournal', json: chinesejournal },
  { name: 'internaljournal', json: internaljournal },
  { name: 'publisher', json: publisher },
  { name: 'tool', json: tool },
  { name: 'moyu', json: moyu }
]
</script>
<style lang="scss" scoped>
.web-page-content {
  margin-left: 180px;
}

@media screen and (max-width: 480px) {
  .web-page-content {
    margin-left: 0;
  }
}
</style>
